<template>
  <el-container class="layout-container-demo" style="height: auto">
    <GW-aside />
    <el-container>
      <!--多加了一个header标签 否则不垂直排列(element的锅)-->
      <el-header style="position: relative;
  background-color: #6e1a6f;
  color: var(--el-text-color-primary);">
        <GW-header />
      </el-header>
      <el-main style="padding: 0;">
        <!--面包屑-->
        <el-breadcrumb :separator-icon="ArrowRight" style="margin: 20px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>文章管理</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>          
        <!--进度条-->
        <div class="container">
          <el-steps style="width: 800px" :active="phase" finish-status="success" align-center>
              <el-step title="编辑文章" description="发表你的新闻!" :icon="Edit"/>
          </el-steps>
        </div>
      <div v-if="phase==0" class="container">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <!--文章-->
            <div>
              <el-form-item label="文章标题">
              <el-input v-model="form.title"/>
              </el-form-item>
              <el-form-item label="文章分区">
              <el-dropdown split-button type="plain" @command="categoryChange">{{categoryShow}}
                <template #dropdown>
                  <el-dropdown-menu >
                    <el-dropdown-item command=1>美食</el-dropdown-item>
                    <el-dropdown-item command=2>人文</el-dropdown-item>
                    <el-dropdown-item command=3>军事</el-dropdown-item>
                    <el-dropdown-item command=4>游戏</el-dropdown-item>
                    <el-dropdown-item command=5>日常</el-dropdown-item>
                    <el-dropdown-item command=0>其它</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-form-item>
            </div>
            <el-form-item label="内容">
              <el-input type="textarea"
                  placeholder="请输入内容"
                  :rows="10"
                  maxlength="1000"
                  style="width: 400px" v-model="form.content"/>
            </el-form-item>
            <el-form-item label="文章封面">
                            <el-upload 
                            ref="uploadRef"
                            class="coverImg-uploader" 
                            :show-file-list="false"
                            :auto-upload="true"
                            action="http://localhost:8080/upload"
                            name="file"
                            :headers="{'Authorization':token}"
                            :on-success="uploadSuccess"
                            >
                            <img v-if="form.coverImg" :src="form.coverImg" class="coverImg" />
                            <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" width="278" />
                        </el-upload>
                        <el-button style="margin: 30px;" type="primary" :icon="Plus" size="large" @click="uploadRef.$el.querySelector('input').click()">
                            上传图片
                        </el-button>
                      </el-form-item>
          </el-form>
          
          <div>
            <el-button @click="phase=1;postDraft()"  style="margin: 50px;">保存为草稿</el-button>
            <el-button @click="postArticle()" type="primary" style="margin: 50px;">发布文章</el-button>
          </div>

      </div>
      <!--阶段二 完成操作 可以返回主页-->
      <div v-if="phase==1" class="container">
          <el-result
          icon="success"
          title="操作已完成"
          sub-title="可返回首页"
          ></el-result>
          <el-button @click="this.$router.push('/home')" type="primary">回到首页</el-button>
      </div>
      </el-main>
      <GW-footer/>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import aside from '../components/aside.vue';
import header from '../components/header.vue';
import footer from '../components/footer.vue';
import{onMounted, reactive, ref,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { message } from 'ant-design-vue';
import Request from '@/api/request';
import jwt from '../../jwt';
import type { ComponentSize } from 'element-plus'
import { ElNotification } from 'element-plus'
import {ArrowRight,Edit, Tickets,Stamp,Plus} from '@element-plus/icons'
import type { ElTable } from 'element-plus'
//水印
const watermark_font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
//分页栏所需的变量
const currentPage = ref(1)
const pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total=ref(1);
//分类变量
const categoryId = ref(0);
const categoryShow = ref("其它");
//上传图片所需变量
const token = ref(localStorage.getItem("Authorization"))
const uploadRef = ref()
//
export default {
  setup(){
    const maxselection=3;
    const Agree_Confirm_dialogVisible=ref(false);
    const phase=ref(0);//当前阶段
    const filted=ref(false);
    const form=ref({
        id:null,
        content:"",
        title:"",
        coverImg:"",
        state:"",
        createTime:"",
        updateTime:"",
        categoryId:1
    });
    //////////////////////////////////////////////////////////
    //图片上传成功的回调函数
    const uploadSuccess = (result)=>{
      form.value.coverImg = result.data;
    }
    //上传文章
      const postArticle = () => {
      console.log("向后端提交的数据", form.value);
      ElMessageBox.confirm(
            '确定发布文章?',
            'Warning',
            {
              confirmButtonText: '确认',
              cancelButtonText: '不要',
              type: 'warning',
            }
          ).then(() => {
            Request({
              method: 'POST',
              url: '/article/add',
              data: {
                title:form.value.title,
                content:form.value.content,
                coverImg:form.value.coverImg,
                state:"已发布",
                categoryId:form.value.categoryId
              }
            }).then(response => {
              ElMessage.success("成功发布文章！")
              phase.value=1;
              return response;
            }).catch((error) => {
              console.log(error);
            });
          })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '取消',
              })
            })
    };
    const postDraft = () => {
      console.log("向后端提交的数据", form.value);
      const UUUurl = '/article/add';
      Request({
        method: 'POST',
        url: UUUurl,
        data: {
          title:form.value.title,
          content:form.value.content,
          coverImg:form.value.coverImg,
          state:"草稿",
          categoryId:form.value.categoryId
        }
      }).then(response => {
        return response;
      }).catch((error) => {
        console.log(error);
      });
    };
    //处理文章分类切换
const categoryChange=(command: number)=>{
  categoryId.value = command;
  form.value.categoryId=command;
  currentPage.value=0;//每次切换显示后 当前页面都为1
  if(categoryId.value==0){
    categoryShow.value = "其它";
  }else if(categoryId.value==1){
    categoryShow.value = "美食";
  }else if(categoryId.value == 2){
    categoryShow.value = "人文";
  }else if(categoryId.value == 3){
    categoryShow.value = "军事";
  }else if(categoryId.value == 4){
    categoryShow.value = "游戏";
  }else if(categoryId.value == 5){
    categoryShow.value = "日常";
  }
  console.log("当前文章分类:",categoryId.value,categoryShow.value)
  }
    /////////////////////////////////////////////////
    onMounted(() => {
    });
    return {
    currentPage,
    pageSize,
    size,
    background,
    disabled,
    total,
      //
      form,
      //
      watermark_font,
      ArrowRight,
      Edit,
      Tickets,
      Stamp,
      Plus,
      //
      phase,
      filted,
      //
      postArticle,
      postDraft,
      Agree_Confirm_dialogVisible,
      categoryChange,
      categoryId,
      categoryShow,
      token,
      uploadRef,
      uploadSuccess
    };
  },
    components: {
        'GW-aside': aside,
        'GW-header': header,
        'GW-footer': footer
    },
}
</script>
<!--样式表-->
<style lang="scss" scoped>
@import url('../assets/Mycss.css');
.coverImg-uploader {
    :deep() {
        .coverImg {
            width: auto;
            max-height: 278px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.coverImg-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 278px;
            height: 278px;
            text-align: center;
        }
    }
}
</style>